import { Outlet,Link,useLocation } from "react-router-dom";
import { Layout,Menu } from "antd";

const {Header,Sider,Content,Footer}=Layout
import { routerlist } from "../router/index";
import Theme from "../compued/Theme";
import { useState } from "react";

export const god=(routes)=>{
    return routes.map(route=>{
        const meneItem={
            label:route.meta.title,
            key:route.path
        }
        if(route.children){
            return {
                ...meneItem,
                children:god(route.children)
            }
        }
        return {
            ...meneItem,
            label:<Link to={route.path}>{route.meta.title}</Link>
        }
    })
}

export default function Layouts(){
    const Location=useLocation()
    // const [dd,setDd]=useState('')
    // const aad=localStorage.getItem('order')
    // if(aad==='yidai'){
    //     setDd('vertical')
    // }else if(aad==='erdai'){
    //     setDd('horizontal')
    // }else if(aad==='sandai'){
    //     setDd('inline')
    // }
    return (
        <div>
        {localStorage.getItem('order')?<Layout>
            
            <Sider style={{minHeight:'100vh'}} theme="light">
                <Menu selectedKeys={Location.pathname} theme="light" mode="inline" items={god(routerlist)} />
            </Sider>
            
            <Content style={{minHeight:'100vh'}}>
                
                <Outlet></Outlet>
                
            </Content>
            <div>
                    <span>欢迎您!管理员:{localStorage.getItem('username')?localStorage.getItem('username'):''}</span><span>昵称:{localStorage.getItem('account')?localStorage.getItem('account'):''}</span>
                </div>
                <div className="qq"><Theme /></div>
            
        </Layout>
        :
        <Layout>
             <Header style={{ display: 'flex', alignItems: 'center' }} theme="light">
                 <Menu selectedKeys={Location.pathname} theme="dark" mode="horizontal" items={god(routerlist)} />
             </Header>
         <Content>
                 <div>
                     <span>欢迎您!管理员:{localStorage.getItem('username')?localStorage.getItem('username'):''}</span><span>昵称:{localStorage.getItem('account')?localStorage.getItem('account'):''}</span>
                 </div>
                 <Outlet></Outlet>
                 
             </Content>
            </Layout>}</div>
        // <Layout>
        // <Header style={{ display: 'flex', alignItems: 'center' }} theme="light">
        //         <Menu selectedKeys={Location.pathname} theme="dark" mode="horizontal" items={god(routerlist)} />
        //     </Header>
        // <Content>
        //         <div>
        //             <span>欢迎您!管理员:{localStorage.getItem('username')?localStorage.getItem('username'):''}</span><span>昵称:{localStorage.getItem('account')?localStorage.getItem('account'):''}</span>
        //         </div>
        //         <Outlet></Outlet>
        //         {/* <Theme /> */}
        //     </Content>
        // {/* </Layout> */}
        
    )
}